import { Link } from 'react-router-dom'
import { useAppSelector } from '../../../../hooks'
import { selectCartProducts } from '../../../../store/reducers/selectors'
import LocalMallOutlinedIcon from '@mui/icons-material/LocalMallOutlined'
import { Badge } from '@mui/material'

export const CART_BUTTON_TEST_ID = 'CART_BUTTON_TEST_ID'

const CartButton = () => {
	const cartProducts = useAppSelector(selectCartProducts)

	return (
		<Link to={'cart'}>
			<Badge
				badgeContent={cartProducts?.length}
				data-testid={CART_BUTTON_TEST_ID}
			>
				<LocalMallOutlinedIcon />
			</Badge>
		</Link>
	)
}

export default CartButton
